<!-- 玩家RTP调控 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" @changeSize="changeSize"
    @changePage="changePage" @search="getSearchList" :showPagination="data.controlUserList.length ? true : false"
    @reset="resetDetails" @select="playerControl" @changeTh="data.dialogVisible = true">
    <template #other>
      <el-tabs v-model="data.query.type" type="card" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="玩家RTP控制列表" :name="1" />
        <!-- <el-tab-pane label="历史控制记录" :name="2" /> -->
      </el-tabs>
    </template>
    <template #form>
      <Operator ref="OperatorRef" @query="queryItem" />
      <el-form-item label="">
        <el-select class="selectWidth120" v-model="data.query.search_type" placeholder="请选择">
          <el-option v-for="item in data.conditionList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input class="width200" v-model="data.query.search_value" placeholder="请输入" clearable
          onKeyUp="value=value.replace(/[\W]/g,'')" />
      </el-form-item>
      <el-form-item label="控制时间：">
        <el-date-picker v-model="data.query.date" type="daterange" range-separator="-" start-placeholder="请选择开始时间"
          end-placeholder="请选择结束时间" value-format="YYYY-MM-DD" clearable :disabled-date="indexStore.disabledDateTime"/>
      </el-form-item>
      <el-form-item label="调控游戏：">
        <el-select v-model="data.query.game_id" placeholder="请选择游戏" filterable>
          <el-option label="全部" :value="-1" />
          <el-option v-for="(item, index) in indexStore.gameArray" :key="index"
            :label="'【' + item.value + '】' + item.label" :value="item.value" v-show="item.type == 1 ? true : false" />
        </el-select>
      </el-form-item>
    </template>
    <template #button>
      <el-button type="danger" :disabled="data.controlUserList.length ? false : true"
        @click="data.isControlShow = true">批量取消RTP调控</el-button>
    </template>
    <template #table>
      <el-table-column type="selection" width="45" v-if="data.query.type == 1 ? true : false" />
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column :prop="item.prop" :label="item.label" :width="item.width">
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content>
                {{ item.tips }}
              </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <template v-if="item.prop == 'agent_id'" #default="scope">
            {{ selectToLabel(indexStore.agentArray, scope.row.agent_id) }}
          </template>
          <template v-if="item.prop == 'account3d_id'" #default="scope">
            <span class="item_check" @click="checkUser(scope.row, 1)">
              {{ scope.row.account3d_id }}
            </span>
          </template>
          <template v-if="item.prop == 'account3d'" #default="scope">
            <span class="item_details" @click="checkUser(scope.row, 3)">
              {{ scope.row.account3d }}
            </span>
          </template>
          <template v-if="item.prop == 'game_id'" #default="scope">
            <GameHeaderInfo class="flexCenter" :game_id="scope.row.game_id" />
          </template>
          <template v-if="item.prop == 'rtp'" #default="scope">
            {{ BigHundred(scope.row.rtp) }}%
          </template>
          <template v-if="item.prop == 'game_rtp'" #default="scope">
            {{ BigHundred(scope.row.game_rtp) }}%
          </template>
          <template v-if="item.prop == 'history_rtp'" #default="scope">
            {{ BigHundred(scope.row.history_rtp) }}%
          </template>
          <template v-if="item.prop == 'control_that_rtp'" #default="scope">
            {{ scope.row.control_that_rtp ? BigHundred(scope.row.control_that_rtp) + '%' : '-' }}
          </template>
          <template v-if="item.prop == 'auto_cancel_rtp'" #default="scope">
            {{ scope.row.auto_cancel_rtp ? BigHundred(scope.row.auto_cancel_rtp) + '%' : '-' }}
          </template>
          <template v-if="item.prop == 'create_at'" #default="scope">
            {{ setTimestampTime(scope.row.create_at) }}
          </template>
        </el-table-column>
      </template>
      <el-table-column fixed="right" label="操作" width="110" v-if="data.query.type == 1 ? true : false">
        <template #default="scope">
          <el-button type="danger" v-permiss="'/system/destroyManager'" size="small" @click="delUserRtp(scope.row)">
            取消调控
          </el-button>
        </template>
      </el-table-column>
    </template>
  </SearchTable>

  <!-- 变更表头弹框 -->
  <TableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
    @resetData="resetData" />

  <!-- 玩家信息详情 -->
  <UserDetails :show="data.isUserDetails" @onHideDetails="onHideDetails" :checkedItem="data.checkedItem" />

  <!-- 批量调控 -->
  <el-dialog :modelValue="data.isControlShow" title="批量调控" width="45%" top="25vh" :close-on-click-modal="false"
    :close-on-press-escape="false" @close="data.isControlShow = false">
    <template #header>
      <p class="box-title marginB5">取消对下列玩家游戏的调控</p>
    </template>
    <div v-loading="indexStore.moduleLoading" class="flexWrap">
      <span class="margin5" v-for="(item, index) in data.showUserList" :key="index">
        <div class="flexCenter">
          【<span class="colorRed"> {{ item.account3d_id }}</span>】{{ item.account3d }}
        </div>
      </span>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" @click="data.isControlShow = false">取 消</el-button>
        <el-button type="primary" v-loading="indexStore.moduleLoading" @click="delAllControl">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import TableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import Operator, { type QueryType } from '@/components/FormItem/Operator.vue'
import UserDetails from '@/views/player/components/user-details.vue'
import GameHeaderInfo from '@/components/FormItem/GameHeaderInfo.vue'
import { throttle, selectToLabel, setObjectArray } from '@/utils/index'
import { setTimestampTime, setTimeValue, getSevenWeek } from '@/utils/time'
import { BigHundred } from '@/utils/math'
import { getControlUser, changeAllControlUser, changeControlUser } from '@/api/player'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    type: 1,
    search_type: 1,
    search_value: '',
    game_id: -1,
    agent_id: -1,
    operated_id: -1,
    date: getSevenWeek()
  },
  conditionList: [
    { label: '平台ID', value: 1 },
    { label: '平台昵称', value: 3 }
  ],
  accountTypeList: [
    { label: '全部', value: -1 },
    { label: '普通', value: 2 },
    { label: '游客', value: 1 }
  ],
  banList: [
    { label: '全部', value: -1 },
    { label: '正常用户', value: 1 },
    { label: '封禁登录', value: 2 }
  ],
  list: [],
  total: 0,
  fields: [
    { label: '控制时间', prop: 'create_at', width: '170', tips: '玩家的控制时间' },
    { label: '商户昵称', prop: 'agent_id', width: '150', tips: '玩家所属商户' },
    { label: '平台ID', prop: 'account3d_id', width: '120', tips: '玩家ID编号，唯一' },
    { label: '平台昵称', prop: 'account3d', width: '180', tips: '玩家名称' },
    { label: '游戏', prop: 'game_id', width: '200', tips: '游戏名称的描述说明' },
    { label: '游戏配置RTP', prop: 'game_rtp', width: '150', tips: '游戏配置内的RTP值' },
    { label: '玩家历史RTP', prop: 'history_rtp', width: '180', tips: '玩家在此游戏设置的RTP' },
    { label: '调控RTP', prop: 'rtp', width: '120', tips: '游戏当天的回报率值越高玩家盈利越多，值越低平台盈利越多' },
    { label: '被控制时的RTP', prop: 'control_that_rtp', width: '180', tips: '玩家被控制时的RTP' },
    { label: '自动解除调控RTP', prop: 'auto_cancel_rtp', width: '180', tips: '当玩家达到设置值时，自动解除调控的RTP' },
  ],
  dialogVisible: false,
  isUserDetails: false,
  isControlShow: false,
  checkedItem: {} as any,
  controlUserList: [] as any[],
  showUserList: [] as any[],
})

// 商户类别 + 商户
const queryItem = (item: QueryType) => {
  data.query.agent_id = item.agent_id
  data.query.operated_id = item.operated_id
}

onMounted(async () => {
  getSearchList()
})

// 选择游戏tab
const handleClick = async (value: any) => {
  data.query.type = value.paneName
  getSearchList()
}

const getSearchList = async () => {
  onHideDetails(false)
  indexStore.setPageLoading(true)
  data.query = setTimeValue(data.query)
  let res = await getControlUser(data.query)
  res.data.list?.forEach((item: any) => {
    item.uid = item.id
  })
  data.list = res.data.list
  data.total = res.data.total
}

// 选择玩家
const playerControl = (val: any) => {
  let arr = JSON.parse(JSON.stringify(val))
  data.controlUserList = val
  data.showUserList = setObjectArray(arr, 'account3d_id')
}
// 取消玩家RTP调控
const delUserRtp = async (row: any) => {
  let query = {} as any, message = '';
  query.agent_id = row.agent_id
  query.user_ids = [row.account3d_id]
  query.game_ids = [row.game_id]
  query.switch = 1
  query.rtp = 0
  message = `【${row.account3d_id}】${row.account3d}玩家对游戏【${row.game_id}】${selectToLabel(indexStore.gameArray, row.game_id)}`
  ElMessageBox.confirm('确定取消( ' + message + ' )的RTP调控', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(async () => {
    await changeControlUser(query)
    ElMessage.success('成功成功取消RTP调控调控')
    onHideDetails(true)
  }).catch(() => { })
}
// 成功取消RTP调控调控
const delAllControl = throttle(async () => {
  let query = {} as any;
  query.user_ids = []
  query.game_ids = [0]
  data.controlUserList.forEach((item: any) => {
    query.user_ids.push(item.agent_id + '_' + item.account3d_id + '_' + item.game_id)
  })
  query.switch = 1
  query.rtp = 0
  if (!query.user_ids.length) {
    return ElMessage.error('请选择有效控制的玩家')
  }
  indexStore.setModuleLoading(true)
  await changeAllControlUser(query)
  ElMessage.success('成功取消RTP调控')
  onHideDetails(true)
},5000)

// 查看玩家信息
const checkUser = async (row: any, type: number) => {
  if (type == 1) {
    data.query.search_type = type
    data.query.search_value = row.account3d_id
    getSearchList()
  } else {
    data.isUserDetails = true
    row.uid = row.user_id
    data.checkedItem = row
  }
}

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
}

const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

// 重置
const OperatorRef = ref<any>()
const onHideDetails = (show: boolean) => {
  data.dialogVisible = false
  data.isUserDetails = false
  data.isControlShow = false
  data.checkedItem = {}
  data.controlUserList = []
  data.showUserList = []
  if (show) {
    getSearchList()
  }
}
const resetDetails = () => {
  data.query = {
    page: 1,
    size: 50,
    type: 1,
    search_type: 1,
    search_value: '',
    game_id: -1,
    agent_id: -1,
    operated_id: -1,
    date: getSevenWeek()
  }
  OperatorRef.value.onHideDetails()
  getSearchList()
}
</script>

<style scoped lang="scss"></style>
